<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin折叠</title>
</head>
<body>
<div id="app">
    <div id="ee"></div>
</div>

<div id="abc"></div>
<div id="edf"></div>
</body>
<style>
<!--    折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。-->
    #app {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 30px;
        margin-bottom: 60px;
        border: 1px solid #000;
    }

    #ee {
        width: 50px;
        height: 50px;
        background-color: burlywood;
        margin-top: 200px;
        margin-bottom: 30px;
        border: 1px solid #000;
    }

    #abc {
        width: 250px;
        height: 250px;
        background-color: orange;
        margin-bottom: 30px;

    }

    #edf {
        width: 300px;
        height: 300px;
        background-color: green;
        margin-top: 70px;
    }
</style>
</html>
